// pages/video/video.js
import request from '../../utils/request'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    navList:[],//导航菜单的列表数据
    navId:'',//导航菜单的id标识
    videoList:[],//视频列表数据
    videoUpdateTime:[],//记录每个视频播放的时间和标识的对象
    isTriggered:false,//下拉刷新的状态
  },
  //获取导航菜单信息
  async getNavList(){
    const result = await request('/video/group/list')
    //存储数据
    const navList = result.data.slice(0,14)
    //取出第一个彩蛋的id作为标识进行储存
    const navId = navList[0].id
    //更新数据
    this.setData({
      navList,
      navId
    })
    //获取视频列表数据
    this.getVideoList(this.data.navId)
  },
  //点击菜单实现高亮切换
  changeNavId(event){
    //获取点击菜单的id标识，这种方式获取到的数据是字符串类型
    const id = event.currentTarget.dataset.id
    //更新数据
    this.setData({
      navId:id,//id>>>0
      videoList:[]
    })
    //改变选中的菜单时，视频；列表重新获取一次
    this.getVideoList(this.data.navId)
  },
  //获取某个菜单对应的视频数据列表
  async getVideoList(id){
    wx.showLoading({
      title:'正在加载中'
    })
    const videoListData = await request('/video/group',{id})
    //关闭加载提示框
    wx.hideLoading()
    //再次修改下拉刷新的状态
    this.setData({
      isTriggered:false
    })
    let index= 0
    const videoList = videoListData.datas.map(item => {
      item.id = index++
      return item
    })
    this.setData({
      videoList
    })
  },
  //控制播放
  handlerPlay(event){
    //思路一
    // //取出此时要播放视频的id
    // let vid = event.currentTarget.id
    // //判断之前存储的vid和现在播放视频的vid是否一致
    // //如果不一致，说明播放的两个视频不是同一个。此时查看之前控制视频播放的对象是否存在，也存在就调用方法停止播放
    // this.vid !== vid&&this.videoContext&&this.videoContext.stop()
    // //存储vid
    // this.vid = vid
    // //控制视频进行播放。首先产生一个对应的对象
    // this.videoContext = wx.createVideoContext(vid)
    // //设置当前视频播放
    // this.videoContext.play()

    //思路二
    //取出要播放的视频的vid
    let vid = event.currentTarget.id
    //创建播放视频的对象
    this.videoContext = wx.createVideoContext(vid)
    //更新数据，存储时点击的图片的id值
    this.setData({
      videoId:vid
    })
    //  在视频播放之前先取出该视频的播放记录
    const {videoUpdateTime} = this.data
    const timeItem =videoUpdateTime.find(item=>item.vid===vid)
    if (timeItem) {
      //跳转到指定的时间位置继续播放
      this.videoContext.seek(timeItem.currentTime)
    }
    //播放
    this.videoContext.play()
  },
  //视频实时播放的事件对应的回调函数
  handlerUpdateTime(event){
    //先取出存取播放记录数据的数组
    const {videoUpdateTime} = this.data
    //产生一个对象，里面存储视频的标识和实时播放的时间
    const updateTime={
      vid:event.currentTarget.id,//视频的标识
      currentTime:event.detail.currentTime//实时播放的时间
    }
    //从数组中找出标识相同的对象
    const updateTimeItem = videoUpdateTime.find(item=>item.vid === updateTime.vid)
    //判断查找的对象是否存在
    if (updateTimeItem) {
      updateTimeItem.currentTime = event.detail.currentTime
    } else {
      videoUpdateTime.push(updateTime)
    }
    //更新数据
    this.setData([
      videoUpdateTime
    ])
  },
  //视频播放结束
  handlerEnd(event){
    const {videoUpdateTime} = this.data
    //从数组中移除vid相同的对象，移除之前存储的播放记录和事件
    videoUpdateTime.splice(videoUpdateTime.findIndex(item=>item.vid===vid),1)
    //
    this.setData({
      videoUpdateTime
    })
  },
  //下拉刷新
  handlerRefresh(){
    //重新根据菜单id获取视频列表
    this.getVideoList(this.data.navId)
  },
  //上拉加载
  handlerTolower(){
    const {videoList} = this.data
    //调用接口
    const newArr = [...videoList.slice(0,8)]
    if (newArr.length) {
      videoList.push(...newArr)
    }
    //跟新数据
    this.setData({
      videoList
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    //获取导航菜单信息
    this.getNavList()
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
    console.log('页面下拉刷新了');
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log('页面的上拉触底');
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage({from}) {
    if (from === 'button') {
      return{
        title:'来自button的转发',
        path:'/pages/video/video',
        imageUrl:'/static/images/lyml.jpg'
      }
    } else {
      return{
        title:'来自menu的转发',
        path:'/pages/video/video',
        imageUrl:'/static/images/lyml.jpg'
      }
    }
  }
})